<template>
  <div>
    <div class="div1">
      <div style="width:40%;height:100%;float:left;">
        <div class="div3">
          <div class="span1">{{ currentTime }}</div>
          <div class="span1">入场人数：{{ onlineNumber }}</div>
          <div class="span1">卡号：{{ userInfoList.membershipCardNumber }}</div>
        </div>
        <div class="div2">
          <img class="image-preview" :src="memberUserPhoto1" style="width: 100%;height: 100%;"/>
        </div>
      </div>
      <div style="width:1%;height:100%;float:left;display: flex;align-items: center;">
        <div style="width:2px;height:85%;background-color:rgb(183, 182, 182);"></div>
      </div>
      <div style="width:59%;height:100%;float:left;">
        <div class="div4">
<!--          <el-input placeholder="请输入手机号/卡号" style="width:17vw;"></el-input>-->
          <!--                    <el-button type="primary" plain style="margin-left:5%;width:8vw;height:5vh;" @click="intoVenu">会员进场</el-button>-->
          <!--                    <el-button type="primary" plain style="margin-left:5%;width:8vw;height:5vh;" @click="outVenu">会员退场</el-button>-->
          <el-button type="primary" plain style="margin-left:5%;width:8vw;height:5vh;" @click="tiaozhuan">会员入驻
          </el-button>
        </div>
        <div class="div5">
          <div class="div6">
            <div class="span2">{{ userInfoList.memberUserRealName }}</div>
            <div class="span3">
              性别：{{ userInfoList.memberUserSex === 0 ? '男' : userInfoList.memberUserSex === 1 ? '女' : '' }}
            </div>
            <div class="span3">手机号码：{{ userInfoList.memberUserPhone }}</div>
<!--            <div class="span3">今日入场：{{ userInfoList.onlineTimes }}</div>-->
            <div class="span3">今日入场：{{userInfoList.times}}</div>
            <div class="span3">
              是否有私教课：
              <span v-if="userInfoList.reservationList && userInfoList.reservationList.length > 0">
                              是
                            </span>
              <span v-else-if="userInfoList.reservationList === undefined">
                              <!-- 空的情况，不显示任何内容 -->
                            </span>
              <span v-else style="color: red;">
                              否
                            </span>
            </div>
            <div class="span3">服务教练：{{ userInfoList.coachName }}</div>
          </div>
          <div class="div7">
            <div class="span3">会员状态：{{ isUpdateMode }}</div>
            <div class="span3">会员卡名称：{{ userInfoList.memberTypeName }}</div>
            <div class="span3">
              卡类型：{{ userInfoList.memberType !== undefined ? userInfoList.memberType === 0 ? '次卡' : '期限卡' : '' }}
            </div>
            <div class="span3">剩余次数：{{
                userInfoList.availableTimes !== undefined ? (userInfoList.availableTimes >= 0 ? userInfoList.availableTimes : 0) : ''
              }}
            </div>
            <div class="span3">购卡日期：{{ formattedCreateDate }}</div>
            <div class="span3">开卡日期：{{ formattedCreateDate }}</div>
            <div class="span3">截止日期：{{ formattedRcreateDate }}</div>
          </div>
          <div
            style="font-size:200px;margin-left:70%;color:rgba(252, 185, 0);transform: translate(20%, -10%) skew(-30deg);opacity: 0.5;text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.5);">
            VIP
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getMemberType,
  getById,
  addMember,
  updateMemberById,
  getMemberLists,
  selectUserInfoByNumid,
  selectOnlineStatuss,
  intoVenuById,
  outVenuById,
  selectEntranceNumbers,
  userIfEntrance,
} from "@/api/memberUser/index";
import {formatDate} from "@/utils";

export default {
  data() {
    return {
      currentTime: '',
      venueUniqueIdentifier: '',
      receivedMessage: "",
      userInfoList: "",
      isUpdateMode: "",
      memberUserPhoto1: "",
      formattedRcreateDate: '',
      formattedCreateDate: '',
      onlineNumber: "",
    };
  },
  watch: {
    // 在 receivedMessage 变化时执行指定的方法
    receivedMessage(newVal) {
      this.handleReceivedMessage(newVal);
    }
  },
  created() {

    // 首次加载时立即获取系统时间
    this.updateTime();
    // 每秒更新一次时间
    setInterval(this.updateTime, 1000);
    this.venueUniqueIdentifier = sessionStorage.getItem('venueUniqueIdentifier');
    // 查询入会人数
    // this.selectOnlineStatus();
    this.selectEntranceNumber();
    // 在页面进入时创建 WebSocket 连接
    this.ws = new WebSocket('ws://localhost:12222/ws');

    // 监听 WebSocket 连接打开事件
    this.ws.onopen = () => {
      console.log('WebSocket connected');
    };

    // 监听 WebSocket 收到消息事件
    this.ws.onmessage = (event) => {
      this.receivedMessage = event.data;
    };
  },
  methods: {
    // 跳转页面
    tiaozhuan() {
      this.$router.push('/member/memberUserInfor')
    },
    // 会员进场
    intoVenu() {
      if (!this.userInfoList.id) {
        this.$message({type: "warning", message: "暂无会员数据,请刷卡！！"});
      } else {
        const id = this.userInfoList.id
        const venueUniqueIdentifier = this.venueUniqueIdentifier
        intoVenuById(id, venueUniqueIdentifier).then((res) => {
          console.log(res)
          this.selectOnlineStatus()
        })
      }
    },
    // 会员退场
    outVenu() {
      if (!this.userInfoList.id) {
        this.$message({type: "warning", message: "暂无会员数据请刷卡！！"});
      } else {
        const id = this.userInfoList.id
        const venueUniqueIdentifier = this.venueUniqueIdentifier
        outVenuById(id, venueUniqueIdentifier).then((res) => {
          console.log(res)
          this.selectOnlineStatus()
        })
      }
    },
    // // 查询入会人数
    // selectOnlineStatus(){
    //     const venueUniqueIdentifier = this.venueUniqueIdentifier
    //     selectOnlineStatuss(venueUniqueIdentifier).then((res) => {
    //         this.onlineNumber = res.data.data
    //     })
    // },
    //查询当天入场人数
    selectEntranceNumber() {
      const venueUniqueIdentifier = this.venueUniqueIdentifier;
      const currentDateTime = new Date();
      const currentDate = formatDate(currentDateTime)

      selectEntranceNumbers(venueUniqueIdentifier,currentDate).then((res) => {
        this.onlineNumber = res.data.data
      })
    },

    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    // websocket数据变化时进行查询
    handleReceivedMessage(message) {
      this.userInfoList = {}
      this.formattedCreateDate = ''
      this.formattedRcreateDate = ''
      this.memberUserPhoto1 = ""
      //当刷卡后 计算入场人数
      // this.onlineNumber = ""



      const parsedMessage = JSON.parse(message);
      const {customValue, readResult} = parsedMessage;
      const venueUniqueIdentifier = customValue
      const membershipCardNumber = readResult

      const formData = new FormData();
      formData.set("venueUniqueIdentifier",venueUniqueIdentifier)
      formData.set("membershipCardNumber",membershipCardNumber)
      formData.set("cardNumber",1)
      const cardNumber = 1

      //查询会员当天是否入场
      userIfEntrance(formData).then((res) => {
        if (res.data === 1){
          this.$message({type: "success", message: "您已入场"});
          selectUserInfoByNumid(venueUniqueIdentifier, membershipCardNumber).then((res) => {
            if (res.data.data === null) {
              this.$message({type: "error", message: "暂无会员数据!请联系管理员！！"});
            } else {
              this.userInfoList = res.data.data
              console.log(this.userInfoList)
              this.userInfoList.times = 1
              this.memberUserPhoto1 = process.env.VUE_APP_IMG_BASE_URL + this.userInfoList.memberUserPhoto

              // 将时间戳转换为日期对象
              // const rcreateTimeTimestamp = this.userInfoList.rcreateTime;
              const rcreateTimeTimestamp = this.userInfoList.expirationTime;
              const createTimeTimestamp = this.userInfoList.createTime;

              const rcreateDate = new Date(rcreateTimeTimestamp);
              const createDate = new Date(createTimeTimestamp);

              // 获取日期和时间信息
              const rcreateYear = rcreateDate.getFullYear(); // 年份
              const rcreateMonth = rcreateDate.getMonth() + 1; // 月份（注意需要加1，因为月份从0开始）
              const rcreateDay = rcreateDate.getDate(); // 日期


              const createYear = createDate.getFullYear(); // 年份
              const createMonth = createDate.getMonth() + 1; // 月份（注意需要加1，因为月份从0开始）
              const createDay = createDate.getDate(); // 日期


              this.formattedCreateDate = `${createYear}-${createMonth}-${createDay}`; // 格式化后的日期字符串
              if (this.userInfoList.memberType === 0) {
                this.formattedRcreateDate = "..."
              } else {
                // 格式化显示日期和时间
                this.formattedRcreateDate = `${rcreateYear}-${rcreateMonth}-${rcreateDay}`; // 格式化后的日期字符串
              }

              if (this.userInfoList.memberType === 0 && this.userInfoList.availableTimes !== 0) {
                this.isUpdateMode = "否";
              } else if (this.userInfoList.memberType === 1 && this.userInfoList.expirationTime) {
                const expirationTime = Date.parse(this.userInfoList.expirationTime); // 将日期字符串转换成时间戳
                const now = Date.now(); // 获取当前时间的时间戳
                if (expirationTime > now) {
                  this.isUpdateMode = "否";
                }
              } else {
                this.isUpdateMode = "是"
              }
            }
          })
        }else {
          this.$message({type: "error", message: res.data});
        }
        console.log(res.data)
        //查询入场人数
        this.selectEntranceNumber()
      })

    },
    // 修改时间
    updateTime() {
      const date = new Date();
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hours = date.getHours();
      const minutes = date.getMinutes();
      const seconds = date.getSeconds();
      this.currentTime = `${year}年${month}月${day}日${hours}:${minutes}:${seconds}`;
    }
  }
};
</script>

<style>
.div1 {
  width: 100%;
  height: 91vh;
  background-image: url(/src/views/背景.jpg);
  background-size: cover;
}

.div2 {
  width: 30vw;
  height: 50vh;
  margin-left: 7%;
  margin-top: 5%;
  background-color: aqua;
}

.div3 {
  width: 30vw;
  height: 27vh;
  margin-left: 7%;
  margin-top: 5%;

}

.span1 {
  width: 30vw;
  height: 10vh;
  font-size: 30px;
  text-align: center;
  color: rgb(84, 78, 78);
}

.div4 {
  width: 55vw;
  height: 10vh;
  margin-top: 3%;
  margin-left: 3%;
}

.div5 {
  width: 55vw;
  height: 70vh;

}

.div6 {
  width: 25vw;
  height: 70vh;
  float: left;
}

.div7 {
  width: 30vw;
  height: 55vh;
  float: left;
}

.span2 {
  font-size: 70px;
  text-align: center;
  margin-bottom: 15%;
  margin-top: 5%;
  color: rgb(84, 78, 78);
}

.span3 {
  margin-top: 5%;
  font-size: 30px;
  margin-left: 20%;
  color: rgb(84, 78, 78);
}
</style>
